<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>人员管理</title>
    <link rel="stylesheet" href="./css/iview.css">
    <link rel="stylesheet" href="./css/personnel_manager.css">
    <script src="./js/vue.js"></script>
    <script src="./js/iview.js"></script>
    <style>
    html,
    body,
    .app {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="app" class="app">
        <Row class="p-title">
            <i-Col span="2" class="p-title-main"><span>公司员工</span></i-Col>
            <i-Col span="3">下属人员（123）个</i-Col>
            <i-Col span="3">
                <Badge count="推荐">
                    <i-Button type="ghost">批量Excel添加</i-Button>
                </Badge>
            </i-Col>
            <i-Col span="3">
                <i-Button type="primary">添加员工</i-Button>
            </i-Col>
        </Row>
        <div class="main-wrap" v-show="isShowAll">
            <Row class="p-main-title">
                <i-Col span="2" class=""><span class="p-main-ctitle">人员关联</span></i-Col>
                <i-Col span="4">钉钉关联</i-Col>
                <i-Col span="5">
                    当前没有关联钉钉的用户 <span style="color: red">(25人)</span>
                </i-Col>
                <i-Col span="3">
                    <i-Button type="ghost">查看</i-Button>
                </i-Col>
            </Row>
            <div class="p-main">
                <!-- 树形 -->
                <div class="tree-wrap">
                    <ul id="demo">
                        <item class="" :model="treeData">
                        </item>
                    </ul>
                </div>
                <div class="right-wrap">
                    <div class="right-wrap-title-wrap">
                        <Icon type="person-stalker" size="23" color="#000"></Icon>
                        <span class="right-wrap-title">部门人员</span>
                    </div>
                    <Row class="p-main-title" style="background-color: #eceff4">
                        <i-Col span="2" class="">
                        	 <i-Button  style="background-color: #fff" size="small">添加成员</i-Button>
                        </i-Col>
                        <i-Col span="3">
                        	 <i-Button  style="background-color: #fff" size="small">新增成员</i-Button>
                        </i-Col>
                        <i-Col span="3">
                            <i-Button  style="background-color: #fff" size="small">添加子分组</i-Button>
                        </i-Col>
                    </Row>
                </div>
            </div>
        </div>
        <!-- 批量导入面板 -->
        <div class="main-wrap" v-show="isShowBatch">
            <Row class="main-title">
                <i-Col span="5">
                    当前下属员工<span>(251人)</span>
                </i-Col>
            </Row>
            <div class="add-after-panle">
                <Row class="add-row">
                    <i-Col span="5">
                        第一步：
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="5">
                        下载员工通讯录模板，批量填写员工信息
                    </i-Col>
                    <i-Col span="5">
                        <i-Button type="primary">下载</i-Button>
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="6">
                        部门选择：
                        <i-Input placeholder="请输入..." style="width: 200px"></i-Input>
                    </i-Col>
                    <i-Col span="6">
                        用户初始密码：
                        <i-Input placeholder="请输入..." style="width: 200px"></i-Input>
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="5">
                        第三步：
                    </i-Col>
                </Row>
                <Row class="add-row"  style="height: 60px">
                    <i-Col span="5">
                        下载员工通讯录模板，批量填写员工信息
                    </i-Col>
                    <i-Col span="5">
                        <Upload action="//jsonplaceholder.typicode.com/posts/">
                            <i-Button type="ghost" icon="ios-cloud-upload-outline">上传文件</i-Button>
                        </Upload>
                    </i-Col>
                </Row>
                <Row class="add-row">
                    <i-Col span="12">
                        <i-Progress :percent="100">
                            <Icon type="checkmark-circled"></Icon>
                            <span>成功</span>
                        </i-Progress>
                    </i-Col>
                </Row>
            </div>
        </div>
        <!--end-->

    </div>

</body>


<!-- 树形模板 -->
<template id="item-template">
    <li class="tree-style">
        <div :class="[{'tree-active':this.model.id==this.$root.active}]" @click="toggle">
            <!-- 是不是文件夹 -->
            <template v-if="isFolder">
                <!-- 是不是已展开 -->
                <span v-if="!open">
                <Icon type="arrow-right-b"></Icon><Icon type="folder" color="#aee4fa" size="20"></Icon>
                </span>
                <span v-else>
                  <Icon type="arrow-down-b"></Icon><Icon type="folder" color="#aee4fa" size="20"></Icon>
             </span>
            </template>
            <template v-else>
                <i class="fa fa-file-text-o"></i>
            </template>
            <!-- 显示的节点名称 -->
            <span v-text="model.text"></span>
        </div>
        <ul v-show="open" v-if="isFolder">
            <item v-for="model in model.children" :model="model">
            </item>
            <!-- <li class="add" @click="addChild">+</li> -->
        </ul>
    </li>
</template>
<script>
// define the item component
Vue.component('item', {
    template: '#item-template',
    props: {
        active: 1,
        model: Object
    },
    data: function() {
        return {
            open: false
        }
    },
    computed: {
        isFolder: function() {
            return this.model.children &&
                this.model.children.length
        }
    },
    methods: {
        //展开事件
        toggle: function() {
            if (this.isFolder) {
                this.open = !this.open
            }
            this.$root.active = this.model.id;
            console.log(this.$root.active);
        },
        //改变当前元素类型
        changeType: function() {
            if (!this.isFolder) {
                Vue.set(this.model, 'children', [])
                this.addChild()
                this.open = true
            }
        },
        //添加子元素
        addChild: function() {
            this.model.children.push({
                id: Math.random(1),
                text: '新仓库'
            })
        }
    }
})


// vue 实例
var app = new Vue({
    el: '#app',
    data: {
        treeData: {},
        active: 1,
        addMember: false,
        addGroup: false,
        isShowAll:true,
        isShowBatch:false

    },
    created: function() {
        //页面载入时，请求数据
        this.getData();

    },
    methods: {
        //获取数据
        getData: function() {
            // $.post('./getData',function(response){
            //      this.treeData=response.data;
            //  });
        }
    }
})
</script>

</html>
